<template>
  <div class="loginBox-container">

    <div class="box">
      <!--   登录方式   -->
      <div class="top">
        <div :class="{'iphone-no':true,'tvc':true,'c-panel':currentPanel=='IphoneNo'}" @click="choose('IphoneNo')">手机号
        </div>
        <div :class="{'v-code':true,'tvc':true,'c-panel':currentPanel=='VerifyCode'}" @click="choose('VerifyCode')">
          验证码
        </div>
      </div>

      <!--  信息    -->
      <div class="center">
        <component :is="currentPanel"></component>
      </div>

      <!-- 注册等-->
      <div class="bottom" @click="goRegister">
        注册
      </div>
    </div>
  </div>
</template>

<script>
import IphoneNo from "@/components/login/IphoneNo"
import VerifyCode from "@/components/login/VerifyCode"

export default {
  //组件名称
  name: "LoginBox",
  props: [],
  //组件注册
  components: {IphoneNo, VerifyCode},
  //数据驱动
  data() {
    return {
      currentPanel: "IphoneNo"
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    choose(panel) {
      this.currentPanel = panel;
    },
    //去注册
    goRegister() {

    }
  },
  //钩子函数
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.loginBox-container {

}

/*盒子样式*/
.box {
  width: 400px;
  min-width: 300px;
  border-radius: 4px;
  background-color: #f5f2ef;
  border: 1px solid #444;
}

/*手机号和验证码*/
@top-height: 60px;
.top {
  height: @top-height;
  border-radius: 4px;
  display: flex;

  div {
    width: 50%;
    line-height: @top-height;
    font-size: 22px;
    color: #6d6b6b;
    background-color: #FFF;
  }

  .iphone-no {
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    border-right: 0.01px solid #c2c0c0;
  }

  .v-code {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    //border-left: 0.1px solid #c2c0c0;
  }

  //当前样式
  .c-panel {
    color: rgb(7, 7, 7);
    font-weight: bolder;
  }
}

.bottom {
  border-radius: 4px;
  margin: 20px 0px 10px 0px;
  text-align: right;
  font-size: 16px;
  padding-right: 10px;
  color: crimson;
}


</style>